<template>
  <vxe-modal :id="dialog.id" v-model="dialog.open" :destroy-on-close="true" :width="dialog.width"
    :height="dialog.height" show-zoom :resize="dialog.resize" remember storage transfer :fullscreen="dialog.fullscreen">
    <template #title>
      <span>{{ dialog.title }}</span>
    </template>
    <template #default>
      <component :is="'dialog-component'" :row="row" :rows="rows" :other="other" />
    </template>
  </vxe-modal>
</template>

<script>
  import Vue from 'vue'

  export default {
    data() {
      return {
        row: {},
        rows: {},
        other: {},
        dialog: {
          id: 'id',
          title: '',
          src: '',
          width: '',
          height: '',
          resize: false,
          fullscreen: false,
          open: false
        }
      }
    },
    methods: {
      show(button, row, rows, other) {
        Vue.component('dialog-component', function(resolve) {
          require([`@/views/services/${button.dialog_src}`], resolve)
        })
        this.row = row
        this.rows = rows
        this.other = other
        this.dialog.id = 'buttonDialog_' + button.id
        this.dialog.title = button.dialog_title
        this.dialog.src = button.dialog_src
        this.dialog.width = button.dialog_width
        this.dialog.height = button.dialog_height
        this.dialog.resize = button.dialog_maxmin
        this.dialog.fullscreen = button.dialog_max
        this.dialog.open = true
      }
    }
  }
</script>

<style type="scss">
  .el-form-item--mini .el-form-item__content,
  .el-form-item--mini .el-form-item__label{
    line-height: 32px;
  }
</style>
